<template>
  <div :class="['left_item_container',{'lefy_item_active':selectIndex===index}]" @click="onClick">
    {{item.name}}
  </div>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        required: true
      },
      selectIndex: {
        type: Number
      },
      index: {
        type: Number
      }
    },
    methods: {
      onClick() {
        this.$emit("changeSelectIndex", this.index)
      }
    }
  }
</script>

<style lang='scss' scoped>
  .left_item_container {
    width: 100%;
    height: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.35rem;
  }

  .lefy_item_active {
    border-left: 3px solid red;
  }
</style>